{{--<!DOCTYPE html>--}}
{{--<html>--}}
{{--<head>--}}
{{--    <meta charset="utf-8">--}}
{{--    <meta http-equiv="x-ua-compatible" content="IE=edge" >--}}
{{--    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>--}}
{{--    <title>Aliplayer Online Settings</title>--}}
{{--    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">--}}
{{--    </script>--}}
{{--    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.16/skins/default/aliplayer-min.css" />--}}
{{--    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.16/aliplayer-min.js"></script>--}}
{{--</head>--}}
{{--<body>--}}



{{--<div class="container">--}}
{{--    <div id="content" class="content">--}}
{{--        <div class="prism-player " id="player-con"></div>--}}
{{--    </div>--}}

{{--    <div class="content-opt">--}}
{{--        <div id="content-text" class="content-text"></div>--}}
{{--        <div class="content-input">--}}
{{--            <input id="text" type="text">--}}
{{--            <button id="send">发送</button>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</div>--}}
{{--<div>--}}

{{--    <p></p>--}}
{{--    <input type="text" id="url" hidden value="{{$play_url}}">--}}
{{--</div>--}}
{{--<h1>直播间人数 <span id="people_num"></span></h1>--}}
{{--<script>--}}
{{--    var play_url=$('#url').val();--}}
{{--    console.log(play_url);--}}
{{--    var player = new Aliplayer({--}}
{{--            "id": "player-con",--}}
{{--            //M3U8格式使用--}}
{{--            "source": play_url,--}}
{{--            "width": "100%",--}}
{{--            "height": "600px",--}}
{{--            "autoplay": true,--}}
{{--            //直播参数必须为true--}}
{{--            "isLive": true,--}}
{{--            "rePlay": false,--}}
{{--            "playsinline": true,--}}
{{--            "preload": true,--}}
{{--            "controlBarVisibility": "hover",--}}
{{--            "useH5Prism": true--}}
{{--        }, function (player) {--}}
{{--            console.log("The player is created");--}}
{{--        }--}}
{{--    );--}}
{{--</script>--}}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <title>Aliplayer Online Settings</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.16/skins/default/aliplayer-min.css" />
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.16/aliplayer-min.js"></script>
</head>
<body>



<div class="container">
    <div id="content" class="content">
        <div class="prism-player " id="player-con"></div>
    </div>

    <div class="content-opt">
        <div id="content-text" class="content-text"></div>
        <div class="content-input">
            <input id="text" type="text">
            <button id="send">发送</button>
        </div>
    </div>
</div>
<div>

    <p></p>
{{--    <input type="text" id="url" hidden value="{{$play_url}}">--}}
</div>
<h1>直播间人数 <span id="people_num"></span></h1>
<script>
    var play_url=$('#url').val();
    console.log(play_url);
    var player = new Aliplayer({
            "id": "player-con",
            //M3U8格式使用
            "source": "rtmp://satui.zxh666.top/ecacc4eb74cca098414cf89ef0eabdcd/7d20f98b362149cc305c40ce479acd41?auth_key=1666359426-0-0-4291398bd4229119362065e153edd60a",
            "width": "100%",
            "height": "600px",
            "autoplay": true,
            //直播参数必须为true
            "isLive": true,
            "rePlay": false,
            "playsinline": true,
            "preload": true,
            "controlBarVisibility": "hover",
            "useH5Prism": true
        }, function (player) {
            console.log("The player is created");
        }
    );
</script>

</body>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
    * {
        box-sizing: border-box;
        outline: none;
    }

    p {
        margin: .5em;
        word-break: break-all;
    }

    .container {
        position: relative;
        width: 100%;
        height: 600px;
        margin: auto;
        padding-right: 200px;
    }

    .content {
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
    }

    .content-opt {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 100%;
    }

    .content-text {
        height: calc(100% - 30px);
        margin-bottom: 30px;
        border: 1px solid #ccc;
        overflow: auto;
    }

    .content-input {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30px;
        border: 1px solid #ccc;
    }
    .content-input input {
        width: 70%;
        padding: 2px;
        border-radius: 5px;
    }

    .content-input button {
        padding: 3px 10px;
        border: none;
        border-radius: 5px;
        background: rgb(90, 154, 214);
    }
</style>
<script>

    (function() {
        class Barrage {
            constructor(id) {
                this.domList = [];
                this.dom = document.querySelector('#' + id);
                if (this.dom.style.position == '' || this.dom.style.position == 'static') {
                    this.dom.style.position = 'relative';
                }
                this.dom.style.overflow = 'hidden';
                let rect = this.dom.getBoundingClientRect();
                this.domWidth = rect.right - rect.left;
                this.domHeight = rect.bottom - rect.top;
            }

            shoot(text) {
                let div = document.createElement('div');
                div.style.position = 'absolute';
                div.style.left = this.domWidth + 'px';
                div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + 'px';
                div.style.whiteSpace = 'nowrap';
                div.style.color = '#' + Math.floor(Math.random() * 256).toString(10);
                div.innerHTML = text;
                this.dom.appendChild(div);
//                $(this).append(div);

                let roll = (timer) =>{
                    let now = +new Date();
                    roll.last = roll.last || now;
                    roll.timer = roll.timer || timer;
                    let left = div.offsetLeft;
                    let rect = div.getBoundingClientRect();
                    if (left < (rect.left - rect.right)) {
                        this.dom.removeChild(div);
                    } else {
                        if (now - roll.last >= roll.timer) {
                            roll.last = now;
                            left -= 3;
                            div.style.left = left + 'px';
                        }
                        requestAnimationFrame(roll);
                    }
                }
                roll(50 * +Math.random().toFixed(2));
            }

        }

        let barage = new Barrage('content');
        function appendList(text) {
//            let p = document.createElement('p');
//            p.innerText = text;
//            document.querySelector('#content-text').appendChild(p);
            $('#content-text').append( '<p>'+text+'</p>');
        }

        document.querySelector('#send').onclick = () =>{
            let text = document.querySelector('#text').value;

//            alert(text);
            // 弹幕信息推送到服务端
            var json = '{"type":"danmu","room_id":'+room_id+',"content":"'+text+'"}';

            websocket.send( json );


        };

        const textList = [
        ];
        textList.forEach((s) =>{
            barage.shoot(s);
            appendList(s);
        });



        {{--var room_id = "{{$live['live_id']}}";--}}
        var room_id = 1;
        var wsServer = 'ws://www.laoxuan.icu:9502';
        var websocket = new WebSocket(wsServer);

        {{--var user_name = "{{$user['real_name']}}";--}}
        var user_name = "zhangxiaohui";
        // var user_name = '超管';
        websocket.onopen = function (evt) {
            console.log("Connected to WebSocket server.");
            var json = '{"type":"connect","user_name" : "'+user_name+'","room_id":'+room_id+' }';
            console.log( '房间的数据：' + json );
            websocket.send(  json );
        };

        websocket.onclose = function (evt) {
            console.log("Disconnected");
        };

        websocket.onmessage = function (evt) {
            console.log('Retrieved data from server: ' + evt.data);


            var obj = JSON.parse( evt.data );

            if( obj.type == 'danmu' ){
                var text = obj.content;
                barage.shoot(text);
                appendList(text);
            }
            if( obj.type == 'join' ){
                $('#people_num').html(obj.num);
            }


        };

        websocket.onerror = function (evt, e) {
            console.log('Error occured: ' + evt.data);
        };

    })();

</script>



